<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function $(id) {
      return document.getElementById(id)
    }
    //验证用户名
    function checkName() {
      let rexp = /^[a-zA-Z]{2,20}$/;
      if (rexp.test($("userName").value)){
        $("nameSpan").innerHTML = "验证通过";
        $("nameSpan").style.color = "green";
        return true;
      }
      else {
        $("nameSpan").innerHTML = "用户名必须是2-20个字母";
        $("nameSpan").style.color = "red";
        return false;
      }
    }
    //验证密码
    function checkPwd() {
      let rexp = /^\d{6}$/;
      if (rexp.test($("pwd").value)){
        $("pwdSpan").innerHTML = "验证通过";
        $("pwdSpan").style.color = "green";
        return true;
      }
      else {
        $("pwdSpan").innerHTML = "密码必须是6位数字";
        $("pwdSpan").style.color = "red";
        return false;
      }
    }
    //验证邮箱
    function checkEmail() {
      let rexp = /^[\w]{3,}@[\w]{2,}[.](com|cn|net)$/;
      if (rexp.test($("email").value)){
        $("emailSpan").innerHTML = "验证通过";
        $("emailSpan").style.color = "green";
        return true;
      }
      else {
        $("emailSpan").innerHTML = "电子邮件必须是XX@XX.com格式";
        $("emailSpan").style.color = "red";
        return false;
      }
    }
    //验证电话
    function checkPhone() {
      let rexp = /^1[358]\d{9}$/;
      if (rexp.test($("phone").value)){
        $("phoneSpan").innerHTML = "验证通过";
        $("phoneSpan").style.color = "green";
        return true;
      }
      else {
        $("phoneSpan").innerHTML = "电话号码必须是13、15、18开始的11位数字";
        $("phoneSpan").style.color = "red";
        return false;
      }
    }
    //验证生日
    function checkBirthday() {
      let rexp = /^[12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|1\d|2\d|3[01])$/
      if (rexp.test($("birthday").value)){
        $("birthdaySpan").innerHTML = "验证通过";
        $("birthdaySpan").style.color = "green";
        return true;
      }
      else {
        $("birthdaySpan").innerHTML = "生日为XXXX-XX-XX";
        $("birthdaySpan").style.color = "red";
        return false;
      }
    }
    //提交表单
    function submitForm() {
      return checkName() & checkPwd() & checkEmail() & checkPhone() & checkBirthday();
    }
  </script>
</head>
<body>
  <form action="aaa" id="f1" onsubmit="return submitForm() == 0?false:true">
    用户名：<input type="text" name="userName" id="userName" onblur="checkName()"><span id="nameSpan"></span><br>
    密码：<input type="password" name="password" id="pwd" onblur="checkPwd()"><span id="pwdSpan"></span><br>
    邮箱：<input type="text" name="email" id="email" onblur="checkEmail()"><span id="emailSpan"></span><br>
    电话：<input type="text" name="phone" id="phone" onblur="checkPhone()"><span id="phoneSpan"></span><br>
    生日：<input type="text" name="birthday" id="birthday" onblur="checkBirthday()"><span id="birthdaySpan"></span><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>
